<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 100%;
        }
        .box{
            width: 1000px;
            /* column-count: 4;
            column-gap: 10px; */
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-start;
        }
        img{
            display: block;
            width: calc(100%/4 - 20px) ;
            height: 100%;
            margin-bottom: 10px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse2-mm.cn.bing.net/th/id/OIP.8Z1ebIvOYRe4-27ghQisJwHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.5FuWzRG5any6lDiDFzuLjAHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse2-mm.cn.bing.net/th/id/OIP.8Z1ebIvOYRe4-27ghQisJwHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.5FuWzRG5any6lDiDFzuLjAHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <!-- <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Lm0de76DlcV_LRlxh4HxHgHaEK?w=182&h=102&c=7&o=5&pid=1.7" alt="" > -->
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse3-mm.cn.bing.net/th/id/OIP.Gbe4NfOi0UkvL36yntu35QHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="">
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7"  data-src="https://tse1-mm.cn.bing.net/th/id/OIP.modYy5GJdPj-ZzJd0fr8zgHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP.CcDeGTZQvKzN5h3IMOQlygHaNK?w=182&h=324&c=7&o=5&pid=1.7" data-src="https://tse2-mm.cn.bing.net/th/id/OIP.8Z1ebIvOYRe4-27ghQisJwHaNK?w=182&h=324&c=7&o=5&pid=1.7" alt="" >
        
    </div>
    <script>
        let num = document.querySelectorAll('img').length
        console.log(Math.ceil(num/4))
        let imgs = document.querySelectorAll('img')
        let n = 0;
        let isLoadImg = false;  // 是否再次加载图片
        let _clientHeight = document.documentElement.clientHeight;   // 获取可见区域高度
        let _scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //  滚动条离视口的距离

        
        // 页面加载完毕可见区域内的图片
        lazyload()
        function lazyload(){
            isLoadImg = n >= num; 
            _scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for(let i=n;i<num;i++){
                // 当前图片离视口的距离 <  获取可见区域高度 + 滚动条离视口的距离
                if(imgs[i].offsetTop < _clientHeight + _scrollTop){
                    console.log(imgs[i])
                    console.log(imgs[i].offsetTop,_clientHeight + _scrollTop)
                    imgs[i].src = imgs[i].dataset.src
                    n=n+1;
                }
            }
        }

        // 监听窗口变化重新计算可见区域
        function computedClientHeight(){
            _clientHeight = document.documentElement.clientHeight;
        }

        /**
         * 简单的节流函数throttle
         * @param {*}
         * fun 要执行的函数
         * delay 延迟
         * wait 在time时间内必须执行一次
         * flag 是否继续触发节流函数
         */
         function throttle(func,wait,flag){
            let timerOut
            return function(){
                if(flag) return;
                if(!timerOut){
                    timerOut = setTimeout(() => {
                        timerOut = null;
                        func()
                    }, wait);
                }
            }
        }

        /**
         * 防抖函数
         * @param {*} 
         * callback 要执行的函数
         * delay 触发函数时间的间隔
         */
        function debounce(callback,delay){
            let timer
            return function(arg){
                clearTimeout(timer)
                timer = setTimeout(() => {
                    callback(arg)
                }, delay);
            }
        }
        // debugger;

        

        // 使用节流函数 实现性能较好的懒加载
        window.addEventListener('scroll',throttle(lazyload,10000,isLoadImg))

        // 使用防抖函数 优化不断触发的窗口变化
        window.addEventListener('resize', debounce(computedClientHeight,800))
    </script>
</body>
</html>